<template>
  <div id="role">
    <role-header
      @handle-search-click-emit="roleSearch"
      @handle-add-click-emit="handleAddClick"
    ></role-header>
    <div class="role-table">
      <role-table
        :table-list="tableList"
        :table-data="tableData"
        :is-site="true"
        :switch="true"
        @handle-edit-click-emit="HandleEditClick"
      ></role-table>
    </div>
    <div class="role-pagination">
      <!-- <role-pagination :total="total"></role-pagination> -->
    </div>
    <role-box
      :drawer-visibility="drawerVisibility"
      :size="drawerSize"
      :title="drawerTitle"
      :form="form"
      :flag="flag"
      @handle-close-emit="handleClose"
      @handle-submit-emit="handleSubmit"
    ></role-box>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import RoleHeader from "./cpns/header.vue";
import RoleTable from "@/components/page-table/index.vue";
import RolePagination from "@/components/page-pagination/index.vue";
import RoleBox from "./cpns/drawer.vue";

import { tableList } from "./role.config";
import { themePinia } from "@/libs/pinia/theme";
import { rolePinia } from "@/libs/pinia/role";

const store = rolePinia();
const theme = themePinia();

// el-table
const page = reactive({
  name: "",
  current: 1,
  size: 10,
});

let form: any = reactive({
  id: "",
  name: "",
  remark: "",
  roleKey: "",
  status: 0,
});

store.roleListActions(page);
const tableData = computed(() => store.list);
const TableListColor = computed(() => theme.TableListColor);

const roleSearch = (name: any) => {
  page.name = name;
  store.roleListActions(page);
};

// drawer
const flag = ref(false); // 用于判断新增和编辑 true编辑 false 新增
const drawerVisibility = ref(false);
const drawerSize = ref("30%");
const drawerTitle = ref("详细信息");

const handleAddClick = () => {
  for (const key in form) {
    form[key] = "";
  }
  flag.value = false;
  drawerVisibility.value = true;
  drawerTitle.value = "角色新增";
};

const HandleEditClick = (row: any) => {
  Object.assign(form, row);
  flag.value = true;
  drawerVisibility.value = true;
  drawerTitle.value = "角色编辑";
};

const handleClose = () => {
  // 判断是否有值进行关闭
  drawerVisibility.value = false;
};

// 新增编辑提交
const handleSubmit = (info: any) => {
  if(flag.value){
    alert("update")
  }
  store.roleAddActions(info);
};
</script>

<style lang="scss" scoped>
#role {
  width: 100%;
}
.role-table {
  display: flex;
  padding: 1.5rem;
  background-color: v-bind(TableListColor);
  margin-top: 1.5rem;
  border-radius: 1rem;
}
.el-table__header {
  border-radius: 1rem;
}
</style>
